<template>
  <div class="personal_purse">
    <my-header :showBack="true"  :title="$t('lang.Mydeity')"  ></my-header>
    <div>
        <van-list v-show="myTringList.length>0" v-model="loading" :finished="finished" @load="loadMore" :offset="20">
            <ul class="trad_list">
              <li v-for="(item,index) in myTringList " :key="index">
								<div class="nflex npadd">
									<h4>{{$t("lang.orderNum")}}：{{item.tradeSerial}}</h4>
									<p class="tipred" v-if="item.tradeType==1">{{$t("lang.Fortrading")}}</p>
									<p class="tiphui" v-if="item.tradeType==2">{{$t("lang.unpaid")}}</p>
                  <p class="tipred" v-if="item.tradeType==3">{{$t("lang.confirmeding")}}</p>
									<p class="tiphui" v-if="item.tradeType==4">{{$t("lang.acancelleding")}}</p>
                  <p class="tiphui" v-if="item.tradeType==5">{{$t("lang.transactionend")}}</p>
								</div>
								<div class="nborder">
									<div class="nflex ">
										<p>{{$t("lang.TheynumberedID")}}：<span>{{item.id}}</span></p>
                    <p>{{$t("lang.prevailinng")}}：<span>{{item.tradePrice}}</span></p>
									</div>
									<div class="nflex ">
										<p>{{$t("lang.Arecancenumber")}}：<span>{{item.tradeAmount}}</span></p>
										<p>{{$t("lang.Numberofstores")}}：<span>{{item.tradeAmount}}</span></p>
									</div>
									<div class="nflex ">
										<p>{{$t("lang.ArecancelledTime")}}：<span>{{item.createTime}}</span></p>
										<!-- <p>担保人姓名：<span>{{item.saleCustomerName}}</span></p> -->
									</div>
									<div class="nflex ">
										<!-- <p>挂单人编号：<span>{{item.dbrID}}</span></p> -->
									</div>
								</div>
								<div class="npadd">
									<h4>{{$t("lang.acombined")}}：${{(item.tradePrice*item.tradeAmount).toFixed(3)}}</h4>
								</div>	
							</li>
            </ul>
          </van-list>
          <div v-if="myTringList.length==0" class="no_data">
              <img src="../../assets/img/my/nodata.png" alt="" srcset="">
              <span>{{$t("lang.NoData")}}</span>  
          </div>
    </div>
  </div>
</template>

<script>
import header from "@/components/header";
import { Toast } from 'vant';
import ClipboardJS from 'Clipboard'

export default {
  components: {
    "my-header": header
  }, 
  data(){
    return{
      userInfo:{},
      loading:false,
      finished:true,
      searchCondition: {  //分页属性  
        pageNo: 1,  //当前页
        pageSize: 20,//每页20条
        type: 1,
        status: 1
      },
      USdollar:"6.8962",//1美元==6.8962RMB
      myTringList:[],
    }
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return timeFormat.formatDate(date, "yyyy.MM.dd hh:mm");
    }
  },
  created() {
    this.selectMyTrade();
  },
  mounted(){
    
  },
  methods:{
    // 我的挂单
    selectMyTrade(){
      this.$ajax(this.$api.selectMyTrade,{type:1}).then(res => {
        if (res.code === 0 && res.msg) {
          this.myTringList=res.msg;
          console.log(this.TradinfoList);
          
        }
      });
    },
    loadMore: function() {
      this.searchCondition.pageNo += 1;
      this.$ajax(this.$api.selectMyEarningsList, this.searchCondition ).then((res) => {
        this.loading = false;
        this.loading1 = false;
        if (res.code == 0) {
          if(this.selected==='income'){
            // this.incomeTotal=res.data.total.toFixed(2);
            this.incomeList = this.incomeList.concat(res.data.list);
            this.finished = this.searchCondition.pageNo==res.data.pageCount;
              
          }else{
            // this.expendTotal=res.data.total.toFixed(2);
            this.expendList = this.expendList.concat(res.data.list);
            this.finished1 = this.searchCondition.pageNo==res.data.pageCount;
          }
        }
      })
    },
  }
}
</script>

<style lang='less' scoped>
.personal_purse {
  background: #f6f6f6;
}
.trad_list{
	
	li{
		box-sizing: border-box;padding:0 12px;background:#ffffff;margin-top:10px;
		h4{color: #333333;}
		.nflex{display: flex;justify-content:space-between ;}
		.nborder{border-top: 1px solid #F6F6F6;border-bottom: 1px solid #F6F6F6;
      p{line-height: 26px;color: #999999;}
      span{color: #666666;}
		}
		.npadd{padding: 15px 0;}
		.buybtn{color: #FF4954;border: 1px solid #FF4954;border-radius: 20px;padding: 0 6px ;}	
		.tiphui{color: #999999;}
		.tipred{color: #FF5458;}
	}
}

</style>
